<template>
	<view class="user">
		<view class="top" @click="toUserInfo">
			<view class="userinfo">
				<view class="avatar">
					<u-avatar v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url"
						:src="userInfo.avatar_file.url" size="70"></u-avatar>
					<u-avatar v-else size="70"></u-avatar>
				</view>
				<view class="text" v-if="hasLogin">
					<view class="nickname">
						<text>{{ userInfo.nickname||userInfo.username||userInfo.mobile }}</text>
					</view>
					<view class="year">
						<uni-dateformat :date="userInfo.register_date" format="yyyy年MM月dd hh:mm"
							:threshold="[60000,3600000*24*30]"></uni-dateformat>注册
					</view>
				</view>
				<view style="font-size: 40rpx;" v-else>
					<text @click.stop="toUserInfo">点击登录</text>
				</view>
				<view class="more" v-if="hasLogin">
					<text class="iconfont icon-chakanyonghu"></text>
				</view>
			</view>
			<view class="background">
				<image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url">
				</image>
				<image v-else src="../../static/font/select-me.png" mode=""></image>
			</view>
		</view>
		<view class="main">
			<view class="info">
				<uni-tag :inverted="true" :text="`${totalLikeNum} 获赞`" type="primary" circle/>
				<uni-tag :inverted="true" :text="`${totalCommentNum } 评论`" type="primary" circle/>
				<uni-tag :inverted="true" :text="`${totalBlogNum} 发文`" type="primary" circle/>
			</view>
			<view class="list">
				<u-list>
					<u-list-item v-for="(item, index) in list1" :key="index">
						<u-cell :isLink="true" size="large" :border="false" :title="`${item.value}`" center
							@click="item.click()">
							<template #icon>
								<text :class="`iconfont ${item.icon}`"></text>
							</template>
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
	<uni-popup ref="alertDialog" type="center">
		<uni-popup-dialog type="error" cancelText="取消" confirmText="确认" title="提示" content="是否要退出登录?"
			@confirm="onConfirm"></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
	import {
		store,
		mutations
	} from '../../uni_modules/uni-id-pages/common/store.js'
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app'
	import {
		computed,
		getCurrentInstance,
		ref
	} from 'vue'
	
	const db = uniCloud.database()

	const alertDialog = ref()
	
	const totalBlogNum = ref(0)
	const totalLikeNum = ref(0)
	const totalCommentNum = ref(0)
	
	const { ctx } = getCurrentInstance()

	const list1 = [{
			icon: 'icon-fabiaowenzhang',
			value: '我的Vlog',
			click: () => {
				if (hasLogin.value) {
					uni.navigateTo({
						url: '../../pages/mypublish/mypublish'
					})
				} else {
					uni.showToast({
						title: '未登录',
						icon: 'none'
					})
				}
			}
		},
		{
			icon: 'icon-dianzan1',
			value: '我的点赞',
			click: () => {
				if (hasLogin.value) {
					uni.navigateTo({
						url: '../../pages/mylike/mylike'
					})
				} else {
					uni.showToast({
						title: '未登录',
						icon: 'none'
					})
				}
			}
		},
		{
			icon: 'icon-pinglun',
			value: '评论过的',
			click: () => {
				if (hasLogin.value) {
					uni.navigateTo({
						url: '../../pages/mycomment/mycomment'
					})
				} else {
					uni.showToast({
						title: '未登录',
						icon: 'none'
					})
				}
			}
		},
		{
			icon: 'icon-about',
			value: '关于'
		},
		{
			icon: 'icon-yijianfankui',
			value: '意见反馈',
			click: () => {
				if (hasLogin.value) {
					uni.navigateTo({
						url: '../../uni_modules/uni-feedback/pages/opendb-feedback/opendb-feedback'
					})
				} else {
					uni.showToast({
						title: '未登录',
						icon: 'none'
					})
				}
			}
		},
		{
			icon: 'icon-tuichu',
			value: '退出登录',
			click: () => {
				if (hasLogin.value) {
					alertDialog.value.open()
				} else {
					uni.showToast({
						title: '未登录',
						icon: 'none'
					})
				}
			}
		}
	]

	const onConfirm = () => {
		mutations.logout()
	}

	const toUserInfo = () => {
		uni.navigateTo({
			url: '../../uni_modules/uni-id-pages/pages/userinfo/userinfo'
		})
	}

	const toLoginpwd = () => {
		uni.reLaunch({
			url: '../../uni_modules/uni-id-pages/pages/login/login-withpwd?uniIdRedirectUrl=/' + ctx.__route__
		})
	}

	const userInfo = computed(() => store.userInfo)
	const hasLogin = computed(() => store.hasLogin)
	
	onShow( async () => {
		if(store.hasLogin) {
			const blogres =await db.collection('blog').where('user_id == $cloudEnv_uid').count()
			const likeres =await db.collection('blog').where('user_id == $cloudEnv_uid').groupBy('user_id').groupField('sum(like_count) as totalLike').get()
			const commentres = await db.collection('blog').where('user_id == $cloudEnv_uid').groupBy('user_id').groupField('sum(comment_count) as totalcomment').get()
			totalBlogNum.value = blogres.result.total
			totalLikeNum.value = likeres.result.data[0]?.totalLike || 0
			totalCommentNum.value = commentres.result.data[0]?.totalcomment || 0
		}
	})
</script>

<style scoped lang="scss">
	::v-deep .u-list {
		height: calc(100%) !important;
	}

	.iconfont {
		color: #2ac2d1;
	}

	.user {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.top {
			width: 100%;
			height: 300rpx;
			position: relative;

			.userinfo {
				height: 100%;
				display: flex;
				align-items: center;

				.avatar {
					margin: 0 30rpx;

				}

				.text {
					height: 135rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.nickname {
						font-size: 45rpx;
					}

					.year {
						font-size: 25rpx;
					}
				}

				.more {
					margin-left: auto;
					margin-right: 20rpx;

					.iconfont {
						font-size: 60rpx;
					}
				}
			}

			.background {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				overflow: hidden;

				image {
					height: 100%;
					width: 100%;
					filter: blur(20px);
					transform: scale(1);
					opacity: 0.3;
				}
			}
		}

		.main {
			width: 100%;
			border-radius: 25rpx 25rpx 0 0;
			background-color: #fff;
			transform: translateY(-20rpx);
			z-index: 10;
			box-sizing: border-box;

			.info {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 100%;
				height: 100rpx;

				.item {
					font-size: 35rpx;

					text {
						font-weight: 700;
					}
				}

			}
		}
	}
</style>